<template>
  <div class="lw_header">
    <div class="lw_header-1">
      <img src="@/assets/logo.png" class="pic-1" alt="" />
      <div class="header-title">{{ title }}</div>
      <slot></slot>
    </div>
    <div class="lw_header-1">
      <!--      <el-tooltip content="引导提示" placement="bottom">-->
      <!--        <div style="float: left;margin-right: 15px">-->
      <!--          <svg-icon-->
      <!--            @click="doShowHelp"-->
      <!--            class="circle"-->
      <!--            :icon-class="help" />-->
      <!--        </div>-->
      <!--      </el-tooltip>-->
      <!--      <div :class="{'header-show-help':$store.getters.isShowingHelp}">-->
      <!--        <el-tooltip content="系统访问量" placement="bottom">-->
      <!--          <click-count style="float: left;margin-right: 15px">-->
      <!--            <svg-icon-->
      <!--              class="circle"-->
      <!--              :icon-class="visits" />-->
      <!--          </click-count>-->
      <!--        </el-tooltip>-->
      <!--        <el-tooltip content="全屏切换" placement="bottom">-->
      <!--          <screenfull style="float: left;margin-right: 15px" ref="screenfull" @changeFullScreen="isFullscreen = $event">-->
      <!--            <svg-icon class="circle" :icon-class="screen"-->
      <!--                      @click="$refs.screenfull&&$refs.screenfull.click()" />-->
      <!--          </screenfull>-->
      <!--        </el-tooltip>-->
      <!--        <el-tooltip content="异常提示" placement="bottom">-->
      <!--          <header-tip-->
      <!--            v-if="count === 0"-->
      <!--            style="margin-right: 15px;float: left"-->
      <!--          >-->
      <!--            <svg-icon-->
      <!--              class="circle"-->
      <!--              :icon-class="tip" />-->
      <!--          </header-tip>-->
      <!--          <el-badge  style="margin-right: 15px;float: left" v-else :value="count">-->
      <!--            <header-tip>-->
      <!--              <svg-icon-->
      <!--                class="circle"-->
      <!--                :icon-class="tip" />-->
      <!--            </header-tip>-->
      <!--          </el-badge>-->
      <!--        </el-tooltip>-->
      <!--        <el-tooltip content="白夜切换" placement="bottom">-->
      <!--          <div style="float: left;margin-right: 15px">-->
      <!--            <svg-icon @click="changeTheme"-->
      <!--                      class="circle"-->
      <!--                      :icon-class="theme" />-->
      <!--          </div>-->
      <!--        </el-tooltip>-->
      <!--        <el-tooltip content="录入切换" placement="bottom">-->
      <!--          <div style="float: left;margin-right: 5px">-->
      <!--            <svg-icon-->
      <!--              v-if="isSettingStatus"-->
      <!--              @click="doSettingClick"-->
      <!--              class="circle"-->
      <!--              :icon-class="setting" />-->
      <!--            <svg-icon-->
      <!--              v-else-->
      <!--              @click="doBackClick"-->
      <!--              class="circle"-->
      <!--              :icon-class="back" />-->
      <!--          </div>-->
      <!--        </el-tooltip>-->
      <!--      </div>-->
      <div class="pho">
        <img :src="photoUrl" alt="" />
      </div>
      <el-dropdown @command="logOut">
        <div class="chn">
          {{ chn }}
          <svg-icon
            style="margin-left: -4px"
            :style="{fill:$themes.icon()}"
            icon-class="caret-down-small" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="mima">修改密码</el-dropdown-item>
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog width="30%" title="修改密码"  :visible.sync="editVisible">
      <el-form ref="editform" :rules="rules" :model="editform">
<!--        <el-form-item label="用户名：" label-width="100px">-->
<!--          <el-input style="width:90%" placeholder="请输入用户名" size="mini" :disabled="true" v-model="editform.username"-->
<!--                    autocomplete="off"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="旧密码：" label-width="100px" prop="oldpassword">
          <el-input style="width:90%" placeholder="请输入旧密码" size="mini" v-model="editform.oldpassword"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="新密码：" label-width="100px" prop="newpassword">
          <el-input style="width:90%" placeholder="请输入新密码" size="mini" v-model="editform.newpassword"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码：" label-width="100px" prop="password1">
          <el-input style="width:90%" placeholder="请输入确认密码" size="mini" v-model="editform.password1"
                    autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="editSure()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Screenfull from "@/components/Screenfull/index.vue";
import ClickCount from "@/components/click-count/index.vue";
import ElOption from "@/components/select/src/option.vue";

export default {
  name: "myheader",
  components: { ElOption, ClickCount, Screenfull },
  props: {
    isHorizontal: {
      type: Boolean,
      default: true
    },
    title: String,
    content: {
      type: Array,
      default: _ => []
    },
    vContent: {
      type: Array,
      default: _ => []
    },
    chn: {
      type: String,
      default: ""
    },
    photoUrl: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      editVisible: false,
      isFullscreen: false,
      editform: {
        username: "",
        oldpassword:"",
        newpassword: "",
        password1: ""
      },
      isLight: this.$store.getters.theme === "light",
      handleFlag: false,
      card: "",
      cur: 0,
      rules: {
        newpassword: [
          {required: true, message: '请输入新密码', trigger: 'blur'},
        ],
        oldpassword: [
          {required: true, message: '请输入旧密码', trigger: 'blur'},
        ],
        password1: [
          {required: true, message: '请输入确认密码', trigger: 'blur'},
        ],
      },
    };
  },
  computed: {
    count() {
      let count = 0;
      Object.values(this.$store.getters.headerTipContent).forEach(item => count += item.length);
      return count;
    },
    visits() {
      return this.$store.getters.theme === "light" ? "Visits_l" : "Visits_d";
    },
    theme() {
      return this.$store.getters.theme === "light" ? "light" : "dark";
    },
    setting() {
      return this.$store.getters.theme === "light" ? "setting_l" : "setting_d";
    },
    back() {
      return this.$store.getters.theme === "light" ? "Return_l" : "Return_d";
    },
    tip() {
      return this.$store.getters.theme === "light" ? "tip_l" : "tip_d";
    },
    help() {
      return this.$store.getters.theme === "light" ? "help_l" : "help_d";
    },
    screen() {
      if (this.$store.getters.theme === "light") {
        return this.isFullscreen ? "screen-off-l" : "screen-on-l";
      } else {
        return this.isFullscreen ? "screen-off-d" : "screen-on-d";
      }
    },
    isSettingStatus() {
      return this.$store.state.business.isSettingStatus;
    }
  },
  methods: {
    doShowHelp() {
      if (this.isSettingStatus) return;
      this.$emit("showHelp");
    },
    doSettingClick() {
      this.$store.commit("SET_SETTING_STATUS");
      this.$emit("clickSetting");
    },
    doBackClick() {
      this.$store.commit("SET_SETTING_STATUS");
      this.$emit("clickBack");
    },
    changeTheme() {
      this.$themes.select(this.$store.getters.theme === "light" ? "dark" : "light");
    },
    logOut(command) {
      if (command === "logout") {
        this.$store.commit("LOGIN_OUT");
      } else {
        this.editform.username = this.chn
        this.editVisible = true
      }
    },
    editSure(){
      if(this.editform.newpassword!==this.editform.password1){
        return this.$message.error("两次密码不一致")
      }
      this.$refs.editform.validate((valid)=>{
        if(valid){
          let query = {
            newpassword:this.editform.newpassword,
            oldpassword:this.editform.oldpassword
          }
        this.$http.post('/sysUser/modifyPassword',query).then((res)=>{
          if(res.code==='200'){
            this.$message.success("修改成功")
          }
        }).finally(()=>{
          this.editVisible = false
          this.$store.commit("LOGIN_OUT");
        })
        }
      })
    }
  }
};
</script>
<style scoped>
.pho {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin: 0 10px;

    overflow: hidden;
}

.pho img {
    width: 100%;
    margin-top: -10px;
}

.lw_header-1 {
    margin-right: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.lw_header-1 .pic-1 {
    width: 14px;
    height: 28px;
    margin-left: 20px;
}

.lw_header-1 .pic-2 {
    width: 18px;
    height: 18px;
    margin-right: 20px;
    cursor: pointer;
}

.change-color:hover {
    fill: red
}
</style>
